<template>
  <view>
    <BeatIndicator :beat="currentBeat" />
    <button @click="toggleMetronome">{{ isPlaying ? 'Stop' : 'Start' }}</button>
    <SettingsPanel />
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import BeatIndicator from '@/components/BeatIndicator.vue';
import SettingsPanel from '@/components/SettingsPanel.vue';

export default {
  components: {
    BeatIndicator,
    SettingsPanel,
  },
  computed: {
    ...mapState(['isPlaying', 'currentBeat']),
  },
  methods: {
    ...mapActions(['toggleMetronome']),
  },
};
</script>

<style>
/* 样式定义 */
</style>
